<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>深度监视</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="root">
    <h2>天气很{{info}}</h2>
    <button @click="swi()">切换</button>
    <h2>a:{{number.a}}</h2>
    <button @click="number.a++">点我a++</button>
    <h2>b:{{number.b}}</h2>
    <button @click="number.b++">点我b++</button>


</div>
</body>
<!--深度监视：
        1.vue的watch默认不见时对象内部值的改变
        2.配置deep：true可以监视对象内部值的改变
    备注：
        1.vue自身可以监视，但watch默认不可以
        2.使用watch时，根据数据的具体结构，决定是否用深度监视
 -->
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            ishot:true,
            number:{
                a:1,
                b:1
            }
        },
        computed:{
            info(){
                return this.ishot? '热':'凉'
            }
        },
        methods:{
            swi(){
                this.ishot=!this.ishot
            }
        },
        watch:{
            ishot:{
                // handler什么时候调用？  ishot发生改变时
                //还可存储改变前后的数据
                immediate:true,//初始化时让handler调用一次
                handler(newValue,oldValue){
                    console.log('ishot被修改了')
                    console.log(newValue)
                    console.log(oldValue)

                }
            },
            //监视多级结构某个子属性的变化
            'number.a':{
                handler(newValue, oldValue) {
                    console.log('number a changed')
                }
            },
            //deep：true 监视多级结构中所有属性的变化
            number: {
                deep:true,
                handler(){
               console.log('number changed')

                }}

        }

    })
</script>
</html>